<template>
    <layout title="商品详情" :contentPadding="'0'">
        <div class="product-detail-swipe">
            <van-swipe>
                <van-swipe-item v-for="(item, index) in data.goods_images" :key="index">
                    <van-image width="100vw" height="89.866667vw" :src="item" />
                </van-swipe-item>
                <template #indicator="{ active, total }">
                    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                </template>
            </van-swipe>
        </div>
        <div class="product-detail-content">
            <div class="product-detail-content-title font-size-32">{{ data.name }}</div>
            <div class="product-detail-content-price font-size-38 font-weight-bold">￥{{ data.price }}</div>
            <div class="product-detail-content-buy-num display-flex">
                <div class="repertory-num">库存<span>{{ data.repertory_num }}</span></div>
                <div class="buy-num">销量<span>{{ data.buy_num }}</span></div>
            </div>
        </div>
        <div class="product-detail-content margin-top-20">
            <div class="product-cell display-flex">
                <div class="product-cell-lable text-color8">商品货号</div>
                <div class="product-cell-group">
                    <van-cell :title="data.id" />
                </div>
            </div>
            <div class="product-cell display-flex">
                <div class="product-cell-lable text-color8">商品介绍</div>
                <div class="product-cell-group">
                    <van-cell :title="showTabba.name" is-link @click="showBottom = true" />
                </div>
            </div>
        </div>
        <div class="product-detail-detail margin-top-20">
            <div class="detail-detail-title">
                <van-divider dashed><span class="font-size-36 detail-title">商品详情</span></van-divider>
            </div>
            <div class="de-detail-content" v-html="data.content"> </div>
            <div class="product-detail-btn van-safe-area-bottom">
                <van-button round size="normal" block type="success"
                    color="linear-gradient(to right, #ff6034, #ee0a24)">立即下单</van-button>
            </div>
        </div>
    </layout>
    <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '70%' }">
        <div class="product-detail-popup" v-html="showTabba.content"></div>
    </van-popup>
</template>

<script setup>
import layout from '@/components/Layout/index.vue'
import { ref,onMounted, reactive } from 'vue';
import apis from '@/apis/ordergroup.js'
import { useRoute,useRouter} from 'vue-router'
import { showToast } from "vant"
const route=useRoute()
const router=useRouter()
let id=route.query.id
console.log(route.query,'2222')


let goodsInfo = async () => {
  
    let params={
      id:id
    }
    try{
     await apis.goodsInfo(params).then((res)=>{
          if(res.code=='200'){
            data.value=res.data
          }else{
              showToast(res.msg);
          }
          loading.value = false; 
          if(page.value==res.data.last_page){
            finished.value=true
          }
        
          
      })
    }catch(e){
  
    }
    
}
onMounted(goodsInfo)
let data = ref({})

let showTabba = ref(
    {
        "id": 5,
        "type": 5,
        "name": "团购商品，赠送对应金额积分",
        "content": "<p>团购区商品简介...<br><\/p>",
        "weigh": 5,
    }
);
let showBottom = ref(false)

</script>

<style lang="scss" scoped>
.product-detail-swipe {
    height: 674px;
    width: 750px;
}

.custom-indicator {
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: var(--white);
}

.product-detail-content {
    padding: 20px;
    background-color: var(--white);
}

.product-detail-content-price {
    color: var(--price-red);
    padding: 16px 0;
}

.product-detail-content-title {
    padding: 10px 0;
}

.product-detail-content-buy-num {
    color: var(--text-color8);
}

.repertory-num,
.buy-num {
    padding: 10px 20px 20px 0;
    line-height: 30px;
    height: 30px;

    span {
        margin-left: 10px;
    }
}

.buy-num {
    margin-left: 20px;
}

.repertory-num {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        right: 0;
        top: 12px;
        width: 1px;
        height: 24px;
        background-color: var(--text-color9);
    }
}

.product-cell {
    height: 80px;
    line-height: 80px;

    :deep(.van-cell) {
        padding-left: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.product-cell-lable {
    width: 140px;
}

.product-cell-group {
    flex: 1;
}

.product-detail-detail {
    padding: 20px;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    position: relative;
}

.detail-title {
    color: var(--text-color3);
}

.de-detail-content {
    flex: 1;
    padding-bottom: 120px;
    :deep(img) {
        max-width: 100% !important;
        width: 100% !important;
        display: block; // 可能需要设置，确保图片以块级元素显示
        height: auto; // 确保图片高度自动以保持宽高比
    }

}

.product-detail-btn {
    padding: 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: var(--white);
    width: 710px;
}
.product-detail-popup{
    margin-top: 40px;
    height:90%;
    padding:20px;overflow-y: auto;
    :deep(img) {
            max-width: 100% !important;
            width: 100% !important;
            display: block; // 可能需要设置，确保图片以块级元素显示
            height: auto; // 确保图片高度自动以保持宽高比
        }
}
</style>